<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>购物车</title>
		<link rel="stylesheet" href="css/style.css">
		<script src="./js/data.js"></script>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<!--199010110罗浩然-->
	<body>
		<div id="shopcart" class="shop-cart">
			<div class="tabs">
				<div class="border">
					<div class="title active" data-index="0">
						全部商品
						<span class="count">3</span>
					</div>
					<div class="title" data-index="1">
						降价商品
						<span class="count">0</span>
					</div>
					<div class="title last" data-index="2">
						库存紧张
						<span class="count">0</span>
					</div>
					<div class="line"></div>
				</div>
			</div>

			<div class="lists">
				<div class="header">
					<ul class="clearfix">
						<!--全选-->
						<li>
							<input type="checkbox" class="select-all" v-model="SelectAll" @change="CheckAll">
							<label>全选</label>
						</li>
						<li class="product-info">商品信息</li>
						<li>单价</li>
						<li>数量</li>
						<li>金额</li>
						<li>操作</li>
					</ul>
				</div>
				
				<div id="shoplist" >
					<div class="shop" class="shoplist" v-for="shop in shops">
						<div class="shop-info" v-if="shop.products.length">
							<!--店铺选择-->
							<input type="checkbox" class="select-shop" v-model="shop.isChecked" @change="CheckShop(shop)">
							<span class="shop-tip">店铺：</span>
							<a class="shop-name" href="#">
								{{shop.shopName}}
							</a>
							<a href="#" class="wangwang">
								旺旺
							</a>
						</div>
						<div class="products">
							<div class="item" v-for="product in shop.products">
								<div class="select-logo" >
									<!--双向绑定-->
									<!--产品选择-->
									<input type="checkbox" v-model="product.isChecked">
									<img :src="product.topImg" alt="产品logo">
								</div>
								<div class="product-detail">
									<div class="left">
										<a href="#" class="product-name">
											{{product.productName}}
										</a>
										<div class="logos">
											<a href="#" class="card">
												信用卡
											</a>
											<a href="#" class="service">
												保障服务
											</a>
											<a href="#" class="order">
												订单险
											</a>
											<a href="#" class="seven">
												7天无理由
											</a>
										</div>
									</div>
									<div class="right" v-html="product.spec">
									</div>
								</div>
								<div class="price">
									<p class="market-price">
										{{product.marketPrice}}
									</p>
									<p class="real-price">
										{{product.price}}
									</p>
								</div>
								<!--数量加减-->
								<div class="count">
									<span class="sub" @click="sub(product.productId)">-</span>
									<span class="input"><input type="text" :value="product.count"></span>
									<span class="add" @click="add(product.productId)">+</span>
								</div>
								<div class="amount">
									￥{{product.count*product.price}}
								</div>
								<div class="delete">
									<a href="#" @click="Delete(product.productId)">删除</a>
								
							</div>
						</div>
					</div>
					
				</div>
			</div>

			<div class="operate">
				<div class="left">
					<!--删除-->
					<input type="checkbox" class="select-all-footer">
					<a href="javascript:void(0);">删除</a>
				</div>

				<div class="right">
					<div>已选择商品<span class="selected-count"> : {{sumcount}}件</span></div>
					<div class="amount">合计（不含运费）： <span class="sum">￥{{sumprice}}</span></div>
					<a href="javascript:void(0);" class="settle">结算</a>
				</div>
			</div>
		</div>
		<script>
			// 实现头部的动画
			var titles = document.querySelectorAll('.title')
			var line = document.querySelector('.line')
			for (let i = 0; i < titles.length; i++) {
				titles[i].addEventListener('mouseenter', function() {
					for (var j = 0; j < titles.length; j++) {
						titles[j].classList.remove('active')
					}
					this.classList.add('active')
					line.style.left = i * line.offsetWidth + 'px'
				})
			}

			Vue.createApp({
				data(){
					return{
						shops: shopcarts,
						SelectAll:false,
					}
				},
				methods:{
					CheckAll(event){
						for(let shop of this.shops){
							shop.isChecked = event.currentTarget.checked;
							console.log(event.currentTarget);
							for(let product of shop.products){
								console.log(event.currentTarget);
								product.isChecked = event.currentTarget.checked;
							};
						};
					},
					//选择店铺
					CheckShop(e){
						let num1 = 0
						let num2 =0
						if(e.isChecked == true) {
							for(let item of e.products){
								item.isChecked = true;
							}
						}else{
								for(let item of e.products){
										item.isChecked = false;
									}
								
						}
						for(let shop of this.shops){
								for(let item of shop.products){
									num2++
									if(item.isChecked == true){
										num1++
									}
								}
						}
						if(num1 == num2){
							this.SelectAll = true
						}else{
							this.SelectAll = false
						}
					},
					add(id){
						for(let shop of this.shops){
							for(let shops of shop.products){
								if(shops.productId === id){
									shops.count++;
								}
								console.log(shops.count)
							}
						}
					},
					sub(id){
						for(let shop of this.shops){
							for(let shops of shop.products){
								if(shops.productId === id){
									shops.count--;
								}
								console.log(shops.count)
							}
						}
					},
					Delete(value) {
						for (let i = 0; i < this.shops.length; i++) {
						for (let j = 0; j < this.shops[i].products.length; j++) {
							console.log(this.shops[i].products);
							if (this.shops[i].products[j].productId === value) {
								this.shops[i].products.splice(j, 1)
							}
						}
					}
				}
				},
				//计算属性
				computed:{
					sumcount(){
						let counts = 0;
						this.shops.map(shop=>{
							shop.products.map(products=>{
								if(products.isChecked){
									counts += products.count
								}
							})
						})
						return counts;
					},
					sumprice(){	
						let prices = 0;
						this.shops.map(shop => {
  							shop.products.map(products => {
								if(products.isChecked){
									prices += products.price*products.count
								}
 							 })
						})
						return prices;
					},
				},
			}).mount("#shopcart");
		</script>
	</body>

</html>
